<script lang="ts" setup>
	import { HeartOutlined, MoreOutlined, UserOutlined, LoadingOutlined, HeartFilled } from "@ant-design/icons-vue"
	import { ref, onMounted, watch } from "vue"
	import { CommentApi } from '@/api/comment'
	import { message } from 'ant-design-vue';
	import CommentInput from '@/views/community/CommentInput.vue';
	import utils from '@/utils'
	import { useUserStore } from '@/stores/user';
	const userStore = useUserStore()
	const props = defineProps(['replyData'])
	const emit = defineEmits(['reply', 'exitReply', 'updateLove'])
	let replyList = ref<any>([])
	let comment = ref<any>({})
	let count = ref(0)
	const open = ref<boolean>(true);
	let replyData = ref<any>(props.replyData)
	let size = ref(10)
	let page = ref(1)
	const getCommentById = () => {
		CommentApi.getCommentById({
			id: replyData.value.commentId,
		}).then((res : any) => {
			if (res.code == 1) {
				comment.value = res.data
			}
		})
	}
	let loading = ref(false)
	const getReply = () => {
		if ((count.value == replyList.value.length && count.value != 0) || loading.value) {
			return
		}
		loading.value = true
		CommentApi.getReply({
			commentId: replyData.value.commentId,
			size: size.value,
			page: page.value
		}).then((res : any) => {
			loading.value = false
			if (res.code == 1) {
				page.value++
				count.value = res.data.count
				replyList.value = replyList.value.concat(res.data.list)
			}
		})
	}
	getCommentById()
	getReply()
	onMounted(() => {
		let element = document.querySelector('.ant-drawer-body') as HTMLDivElement;
		let content = document.querySelector('.ant-drawer-content-wrapper') as HTMLDivElement;
		content.style.borderRadius = "20px 20px 0 0"
		content.style.overflow = "hidden"
		element?.addEventListener('scroll', function () {
			if (element?.scrollHeight - element?.scrollTop === element?.clientHeight) {
				getReply()
			}
		});
		
	})
	const reply = (commentId : number, nickname : string, userId : number) => {
		replyData.value.commentId = commentId
		replyData.value.nickname = nickname
		replyData.value.userId = userId
	}
	const afterOpenChange = (bool : boolean) => {
		if (!bool) {
			emit('exitReply')
		}
	};
	const submitReply = (e : any) => {
		if (comment.value.userId != replyData.value.userId) {
			e.content = e.content.replace('<p>', '<p><span style="color:#1677ff;margin-right:8px">@' + replyData.value.nickname + '</span>')
		}
		CommentApi.addComment({
			...e,
			pid: replyData.value.commentId,
			articleId: replyData.value.articleId,
		}).then((res : any) => {
			if (res.code == 1) {
				page.value = 1
				replyList.value = []
				getReply()
				message.success(res.message);
			} else {
				open.value = false
			}
		})
	}
	const love = (id : number, index : any=undefined) => {
		CommentApi.love({
			id: id
		}).then((res : any) => {
			if (res.code == 1) {
				if (typeof index === "undefined") {
					comment.value.love = res.data.love
					comment.value.loveUser = res.data.loveUser
				} else {
					replyList.value[index].love = res.data.love
					replyList.value[index].loveUser = res.data.loveUser
				}
				emit("updateLove", res.data)
			}
		})
	}
	const isLove = (loveUser : string) => {
		let loveUserList = loveUser.split(",")
		if (userStore.userInfo == "" || loveUserList.indexOf(userStore.userInfo.id + "") == -1) {
			return false
		} else {
			return true
		}
	}
	let inputHeight = ref(141)
	const getInputHeight = (e : number) => {
		inputHeight.value = e
	}
	const copyUrl = (commentId : number) => {
		var textArea = document.createElement("textarea");
		let index = window.location.href.indexOf('&commentId=')
		if (index > -1) {
			textArea.value = window.location.href.substring(0, index) + '&commentId=' + commentId;
		} else {
			textArea.value = window.location.href + '&commentId=' + commentId;
		}
		document.body.appendChild(textArea);
		textArea.select();
		document.execCommand("copy");
		document.body.removeChild(textArea);
		message.success('链接已复制');

	}
</script>

<template>
	<a-drawer v-model:open="open" height="90%" :bodyStyle="{padding: 0,marginTop: 40+'px'}" rootClassName="drawer"
		:closable="false" title="" placement="bottom" @afterOpenChange="afterOpenChange">
		<div class="reply-box">
			<div class="reply-content" :style="{paddingBottom:inputHeight+'px'}">
				<div class="comment-li" v-if="comment.id">
					<a-avatar :size="40" class="li-left" :src="comment.avatar">
						<template #icon>
							<UserOutlined />
						</template>
					</a-avatar>
					<div class="li-right">
						<div class="li-header">
							<div class="name">
								{{comment.nickname}}
							</div>
							<heart-filled class="icon active" @click="love(comment.id)"
								v-if="isLove(comment.loveUser)" />
							<heart-outlined class="icon" @click="love(comment.id)" v-else />
							<a-dropdown :trigger="['hover']">
								<more-outlined class="icon" />
								<template #overlay>
									<a-menu class="menu">
										<a-menu-item key="0" @click="copyUrl(comment.id)">复制链接</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>

						</div>
						<div class="li-content">
							<div class="text">
								<span v-html="comment.content"></span>
							</div>
							<img :src="comment.img" v-if="comment.img" />
						</div>
						<div class="li-footer">
							<div class="time">{{utils.getFullTime(comment.createTime)}}</div>
							<div class="like">{{comment.love}}赞</div>
							<div class="reply" @click="reply(comment.id,comment.nickname,comment.userId)">回复</div>
						</div>
					</div>
				</div>
				<div class="line"></div>
				<div class="comment-li" v-for="(item,index) in replyList">
					<a-avatar :size="40" class="li-left" :src="item.avatar">
						<template #icon>
							<UserOutlined />
						</template>
					</a-avatar>
					<div class="li-right">
						<div class="li-header">
							<div class="name">
								{{item.nickname}}
							</div>
							<heart-filled class="icon active" @click="love(item.id,index)"
								v-if="isLove(item.loveUser)" />
							<heart-outlined class="icon" @click="love(item.id,index)" v-else />
							<a-dropdown :trigger="['hover']">
								<more-outlined class="icon" />
								<template #overlay>
									<a-menu class="menu">
										<a-menu-item key="0" @click="copyUrl(comment.id)">复制链接</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</div>
						<div class="li-content">
							<div class="text">
								<span v-html="item.content"></span>
							</div>
							<img :src="item.img" v-if="item.img" />
						</div>
						<div class="li-footer">
							<div class="time">{{utils.getFullTime(item.createTime)}}</div>
							<div class="like">{{item.love}}赞</div>
							<div class="reply" @click="reply(comment.id,item.nickname,item.userId)">回复</div>
						</div>
					</div>
				</div>
				<a-empty v-if="!loading&&count==0" description="暂无回复" class="empty" />
				<div class="tips">
					<span v-if="loading" class="loading">
						<LoadingOutlined />
						加载中
					</span>
					<span v-if="!loading && count==replyList.length && count!=0" class="loading">
						没有更多了
					</span>
				</div>
				<CommentInput @change="submitReply" @getHeight="getInputHeight" class="input" type="reply"
					:placeholder="'回复'+replyData.nickname" />
			</div>
		</div>
	</a-drawer>
</template>

<style lang="scss" scoped>
	.drawer .ant-drawer-content-wrapper {
		border-radius: 20px 20px 0 0;
	}

	.reply-box {
		background-color: #fff;
		color: #000;

		.reply-content {
			margin: 0 auto;

			.line {
				margin: 0 auto;
				width: 800px;
				border-top: 1px solid #f2f2f2;
			}

			.comment-li {
				display: flex;
				padding: 24px 0;
				font-size: 16px;
				margin: 0 auto;
				width: 800px;

				.li-left {
					flex: 0 0 auto;
					margin-right: 12px;
				}

				.li-right {
					flex: 1;

					.li-header {
						display: flex;
						align-items: center;
						height: 40px;

						.name {
							margin-right: auto;
						}

						.icon {
							margin-left: 24px;
							font-size: 18px;
							color: #666;
							cursor: pointer;
						}

						.active {
							color: red;
						}
					}

					.li-content {
						margin-top: 6px;

						.text {}

						.text ::v-deep a {
							color: #1677ff;
							text-decoration:underline;
						}

						img {
							margin-top: 12px;
							max-width: 195px;
						}
					}

					.li-footer {
						display: flex;
						margin-top: 12px;
						color: #999;

						div {
							margin-right: 24px;
						}

						.time {}

						.like {}

						.reply {
							color: #666;
							cursor: pointer;
						}
					}
				}
			}

			.empty {
				padding-top: 100px;
			}

			.tips {
				.loading {
					color: #969799;
					font-size: 14px;
					display: flex;
					justify-content: center;
					padding: 10px 0;
				}
			}
		}

		.input {
			position: fixed;
			bottom: 0;
			width: 900px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>